<template>
  <div>
    <div class="header">
      <el-form :model="searchForm" inline>
        <el-form-item label="用户名称">
          <el-input placeholder="请输入用户名称进行查询" v-model="searchForm.account"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button @click="showAddAcount">新增</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="account" label="用户名" />
      <el-table-column prop="level" label="等级" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="updateAccount(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteAccount(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 新增/修改弹框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" @close="resetAccountDialog">
      <el-form :model="accountForm" label-width="120px">
        <el-form-item label="用户名称">
          <el-input placeholder="请输入用户名称" v-model="accountForm.account"></el-input>
        </el-form-item>
        <el-form-item label="等级">
          <el-input placeholder="请输入用户等级" v-model.number="accountForm.level"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetAccountDialog">取消</el-button>
          <!--添加  -->
          <el-button type="primary" @click="addAccount" v-if="dialogType === dialogTypeMap.add">确认</el-button>
          <!-- 修改 -->
          <el-button type="primary" @click="updateAccountHandle" v-else>确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>



<script>
import { getDataApi, addAccountApi, deleteAccountApi, updateAccountApi } from '../utils/mockServer/db'

// 常量定义
const defaultLevel = 1
// 0 添加，1 修改
const dialogTypeMap = {
  add: 0,
  modify: 1
}
const dialogTitleMap = {
  0: '新增',
  1: '修改'
}


export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        account: ''
      },
      accountForm: {
        account: '',
        level: defaultLevel,
        id: 0
      },
      dialogVisible: false,
      dialogTypeMap: dialogTypeMap,
      dialogType: dialogTypeMap.add
    }
  },
  computed: {
    dialogTitle() {
      return dialogTitleMap[this.dialogType]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 请求全部数据
    getData(account) {
      this.tableData = getDataApi({ account })
    },
    // 搜索操作
    handleSearch() {
      this.getData(this.searchForm.account)
    },
    showAddAcount() {
      // 显示弹框，并切换弹框类型为新增
      this.dialogVisible = true
      this.dialogType = dialogTypeMap.add
    },
    addAccount() {
      // 获得弹框中的数据
      const { account, level } = this.accountForm
      const accountObj = {
        account,
        level
      }
      // 调用接口
      addAccountApi(accountObj)
      this.$message({
        type: 'success',
        message: '添加成功',
      })

      this.getData()
      this.resetAccountDialog()
    },
    updateAccount(row) {
      // 展示弹框并切换弹框内容
      this.dialogVisible = true
      this.dialogType = dialogTypeMap.modify

      // 将要修改的内容显示到输入框中
      const { account, level, id } = row
      this.accountForm.account = account
      this.accountForm.level = level
      this.accountForm.id = id

    },
    updateAccountHandle() {
      updateAccountApi(this.accountForm)

      this.$message({
        type: 'success',
        message: '更新成功',
      })

      this.getData()
      this.resetAccountDialog()
    },

    deleteAccount(row) {
      this.$confirm('是否要删除该账号', '警告',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          deleteAccountApi(row)
          this.$message({
            type: 'success',
            message: '删除成功',
          })
          this.getData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除',
          })
        })
    },
    resetAccountDialog() {
      // 复位弹框状态以及弹框内form表单状态
      this.dialogVisible = false
      this.accountForm.account = ''
      this.accountForm.level = defaultLevel
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
}
</style>